<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8">
		<title>睿云 让生活更美好！</title>
		<script src="../static/js/vue.js" th:src="@{/js/vue.js}"></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="../static/css/element.css" th:href="@{/css/element.css}">
		<link rel="stylesheet" href="../static/css/global.css" th:href="@{/css/global.css}" />
		<link rel="stylesheet" href="../static/css/main.css" th:href="@{/css/main.css}" />
		<link rel="stylesheet" href="../static/css/myelement.css" th:href="@{/css/myelement.css}" />
		<!-- 引入组件库 -->
		<script src="../static/js/element.js" th:src="@{/js/element.js}"></script>
	</head>
	<body>
		<div id="app">
			<leftbar></leftbar>
			<topbar></topbar>
			<div class="main-content">
				<div class="z-tabs">
					<div class="z-tabs_header">
			 			<div class="z-tabs_item"><span>公司资料</span></div>
			 			<router-link class="z-tabs_item" to="/band"><span>品牌设置</span></router-link>
			 			<router-link class="z-tabs_item" to="/realname"><span>实名认证</span></router-link>
			 			<router-link class="z-tabs_item" to="/kefu"><span>客服设置</span></router-link>
			 			<div class="z-pop_question" v-if="showTip">
			  	 			<el-popover
								  ref="popoverq"
								  placement="bottom-start"
								  width="440"
								  trigger="hover">
								  <p class="z-jiao" v-text="tipmegs"></p>
								</el-popover>
								
								<i v-popover:popoverq class="el-icon-question"></i>
			  	 		</div>
			 		</div>
				</div>
				
				<router-view></router-view>
				
			</div>
		</div>
		
		<!--左侧组件-->
	<template id="leftbar">
		<div class="leftBar">
			<div class="logo">
				<img src="../static/img/logo.png" alt="" th:src="@{/img/logo.png}" />
			</div>
			<div class="aside-wrap">
				<ul>
					<li class="navi-item">
						<a title="订单">
	                        <i><img src="../static/img/order.png" alt="" th:src="@{/img/order.png}" /></i>
	                        <span class="nav-item-title">订单</span>
	                    </a>
	                    <ol class="secend-item">
	                    	<li class="pop-item">
	                    		<a href="javascript:;">订货单</a>
	                    	</li>
	                    	<li class="pop-item">
	                    		<a href="javascript:;">出库/发货单</a>
	                    	</li>
	                    	<li class="pop-item">
	                    		<a href="javascript:;">退货单</a>
	                    	</li>
	                    	<li class="pop-item">
	                    		<a href="javascript:;">订单商品明细</a>
	                    		<a href="javascript:;">待出商品明细</a>
	                    		<a href="javascript:;">出库商品明细</a>
	                    		<a href="javascript:;">退货商品明细</a>
	                    	</li>
	                    </ol>
					</li>
					<li class="navi-item">
						<a title="商品">
	                        <i><img src="../static/img/good.png" alt="" th:src="@{/img/good.png}" /></i>
	                        <span class="nav-item-title">商品</span>
	                    </a>
	                    <ol class="secend-item">
	                    	<li class="pop-item">
	                    		<a href="javascript:;">商品列表</a>
	                    		<a href="javascript:;">商品图片</a>
	                    		<a href="javascript:;">商品价格</a>
	                    		<a href="javascript:;">商品回收站</a>
	                    	</li>
	                    	<li class="pop-item">
	                    		<a href="javascript:;">商品经营范围屏蔽 </a>
	                    	</li>
	                    	<li class="pop-item">
	                    		<a href="javascript:;">商品分类</a>
	                    		<a href="javascript:;">商品品牌</a>
	                    		<a href="javascript:;">商品单位</a>
	                    		<a href="javascript:;">商品多规格</a>
	                    	</li>
	                    </ol>
					</li>
					<li class="navi-item">
						<a title="营销">
	                        <i><img src="../static/img/saler.png" alt="" th:src="@{/img/saler.png}" /></i>
	                        <span class="nav-item-title">营销</span>
	                    </a>
					</li>
					<li class="navi-item">
						<a title="库存">
	                        <i><img src="../static/img/store.png" alt="" th:src="@{/img/store.png}" /></i>
	                        <span class="nav-item-title">库存</span>
	                    </a>
					</li>
					<li class="navi-item">
						<a title="客户">
	                        <i><img src="../static/img/god.png" alt="" th:src="@{/img/god.png}" /></i>
	                        <span class="nav-item-title">客户</span>
	                    </a>
					</li>
					<li class="navi-item">
						<a title="资金">
	                        <i><img src="../static/img/cash.png" alt="" th:src="@{/img/cash.png}" /></i>
	                        <span class="nav-item-title">资金</span>
	                    </a>
					</li>
					<li class="navi-item">
						<a title="报表">
	                         <i><img src="../static/img/table.png" alt="" th:src="@{/img/table.png}" /></i>
	                        <span class="nav-item-title">报表</span>
	                    </a>
					</li>
				</ul>
			</div>
			<div class="bottom-menu">
				<ul>
					<li class="bottom-item"><i class="z-ying"><img src="../static/img/ying.png" alt="" th:src="@{/img/ying.png}" /></i></li>
					<li class="bottom-item"><i class="z-ying"><img src="../static/img/setting.png" alt="" th:src="@{/img/setting.png}" /></i></li>
					<li class="bottom-item"><i class="z-ying"><img src="../static/img/kefu.png" alt="" th:src="@{/img/kefu.png}" /></i></li>
				</ul>
			</div>
		</div>
	</template>

	<!--头部组件-->
	<template id="topbar">
		<div class="topBar">
			<div class="nav-tab">
				<ul class="clearfix">
					<li>
						<a href="javascript:;">公司资料</a>
						<i class="el-icon-close"></i>
					</li>
					<li>
						<a href="javascript:;">订货单</a>
						<i class="el-icon-close"></i>
					</li>
					<li>
						<a href="javascript:;">商品图片</a>
						<i class="el-icon-close"></i>
					</li>
					<li>
						<a href="javascript:;">库存状况</a>
						<i class="el-icon-close"></i>
					</li>
					<li>
						<a href="javascript:;">订单应付</a>
						<i class="el-icon-close"></i>
					</li>
					<li>
						<a href="javascript:;">商品销售</a>
						<i class="el-icon-close"></i>
					</li>
					<li>
						<a href="javascript:;">资金报表</a>
						<i class="el-icon-close"></i>
					</li>
					<li>
						<a href="javascript:;">订单数据</a>
						<i class="el-icon-close"></i>
					</li>
				</ul>
			</div>
			<div class="wrap-header-right-menu">

				<el-popover ref="popover1" placement="top-start" width="120" trigger="hover" > <!--放在调用前面-->
					<ol class="z-pop-top">
						<li><a href="javascript:;">新手须知</a></li>
						<li><a href="javascript:;">新手引导</a></li>
						<li><a href="javascript:;">帮助中心</a></li>
					</ol>
				</el-popover>
				<a href="javascript:;" v-popover:popover1><img src="../static/img/help.png" alt="" th:src="@{/img/help.png}" /></a>

				<el-popover ref="popover2" placement="top-start" width="120" trigger="hover" >
					<ol class="z-pop-top">
						<li><a href="javascript:;">刷新当前页面</a></li>
						<li><a href="javascript:;">关闭当前页面</a></li>
						<li><a href="javascript:;">关闭全部页面</a></li>
					</ol>
				</el-popover>
				<a href="javascript:;"  v-popover:popover2 ><img src="../static/img/reflesh.png" alt="" th:src="@{/img/reflesh.png}" /></i></a>

				<el-popover ref="popover3" placement="top-start" width="120" trigger="hover" >
					<ol class="z-pop-top">
						<li><a href="javascript:;">订单留言 (<span>0</span>)</a></li>
						<li><a href="javascript:;">留言咨询 (<span>0</span>)</a></li>
						<li><a href="javascript:;">站内信</a></li>
					</ol>
				</el-popover>
				<a href="javascript:;" v-popover:popover3 ><img src="../static/img/megs.png" alt="" th:src="@{/img/megs.png}" /></a>

				<el-popover ref="popover4" placement="top-start" width="120" trigger="hover" >
					<ol class="z-pop-top">
						<li><a href="javascript:;">我的账号</a></li>
						<li><a href="javascript:;">修改密码</a></li>
						<li><a href="javascript:;">退出</a></li>
					</ol>
				</el-popover>
				<a href="javascript:;" class="z-wo" v-popover:popover4 ><img src="../static/img/mine.png" alt="" th:src="@{/img/mine.png}" /><span>1580857</span></a>

			</div>
		</div>
	</template>

    <!--实名认证-->
    <template id="realname">
    	<div class="realname">
			<div class="real-title">
				<span>证件</span>
				<s class="no-upload"><i class="el-icon-warning"></i>实名认证待上传</s>
			</div>
			<div class="upload-content clearfix">
				<div class="up-license fl">
					<el-upload
					  class="avatar-uploader"
					  action="https://jsonplaceholder.typicode.com/posts/"
					  :show-file-list="false"
					  :on-success="handleAvatarSuccess"
					  :before-upload="beforeAvatarUpload">
					  <img v-if="imageUrl" :src="../static/imageUrl" class="avatar">
					  <div v-else class="avatar-uploader-icon">
					  	<img src="../static/img/upload.png" alt="" th:src="@{/img/upload.png}" />
					  	<p>上传营业执照</p>
					  </div>
					</el-upload>
					<div class="up-ipt">
						<input type="text" placeholder="请输入统一社会信用代码"/>
					</div>
				</div>
				<div class="id-cart fl">
					<el-upload
					  class="avatar-uploader"
					  action="http://58.49.17.106:17081/api/app/upload"
					  :show-file-list="false"
					  :on-success="handleIdSuccess"
					  :before-upload="beforeAvatarUpload">
					  <img v-if="imageUrl" :src="../static/imageUrl" class="avatar">
					  <div v-else class="avatar-uploader-icon">
					  <img src="../static/img/upload.png" alt="" th:src="@{/img/upload.png}" />
					  <p>上传法人/经办人身份证</p>
					  </div>
					</el-upload>
					<div class="up-ipt">
						<input type="text" placeholder="请输入法人/经办人身份证号码"/>
					</div>
				</div>
				<div class="z-tip fl">
					<el-popover
					  ref="popoverup"
					  placement="right"
					  width="400"
					  trigger="hover">
					  <div class="up-popoer">
					  	<p>LOGO会展示到您的订货端，影响您的订货客户<br/> 请按照以下建议上传LOGO以达到最佳展示效果： </p>
					  	<p>1、图片宽高：120px-520px，大小不超过6MB</p> 
					  	<p>2、 支持JPG、PNG、JPEG </p> 
					  	<p>3、裁剪时LOGO左右不留间隙</p>
					  </div>
					</el-popover>
					
					<i v-popover:popoverup class="el-icon-question tipicon"></i>
				</div>
			</div>
			<div class="bottom-butn">
				 <el-button type="primary">保存</el-button>
				  <el-button>取消</el-button>
			</div>
		</div>
    </template>
	
	<!--客服设置-->
	<template id="setkf">
		<div class="content_item active">
			<div class="content_item_filter clearfix">
				<div class="filter-btn fr">
					<el-button type="primary">新增客服/联系方式</el-button>
				</div>
			</div>
			<div class="z-tables has_option">
				<table border="0" cellspacing="0" cellpadding="0">
					<tr>
						<th class="text-c" width="5%"></th>
						<th width="17%">类型</th>
						<th width="19%">名称</th>
						<th width="24%">号码</th>
						<th width="23.8%">排序值</th>
						<th class="text-c">操作</th>
					</tr>
					<tbody>
					<tr v-for="(item,index) in itemes" :key="index">
						<td class="text-c">{{item.no}}</td>
						<td>{{item.type}}</td>
						<td>{{item.name}}</td>
						<td>{{item.number}}</td>
						<td>{{item.sort}}</td>
						<td class="text-c">
							<a href="javascript:;" class="revise" title="修改">修改</a>
							<span>|</span>
							<a href="javascript:;" class="delete" title="删除">删除</a>
						</td>
					</tr>
					</tbody>
				</table>
			</div>
		</div>
	</template>
	
	<!--品牌设置-->
	<template id="band">
		<div class="setband">
			<div class="form-grom">
				<label class="bandlabel">*订货平台名称</label>
				<div class="band-ipt">
					<input class="myipt" placeholder="请输入内容" v-model="input3"></input>
				</div>
			</div>
			<div class="form-grom">
				<label class="bandlabel">*专属访问网址</label>
				<div class="band-ipt">
					<el-input placeholder="请输入内容" v-model="input4">
					    <template slot="prepend">Http://</template>
					    <template slot="append">.dhb168.com</template>
					</el-input>
				</div>
				<a href="javascript:;" class="visits">访问订货平台</a>
			</div>
			<div class="form-grom">
				<label class="bandlabel">广告语</label>
				<div class="band-ipt">
					<input class="myipt" placeholder="最多20字" v-model="input5"></input>
				</div>
			</div>
		</div>
	</template>
	
	</body>
<script src="../static/js/jquery.min.js" th:src="@{/js/vue.js"></script>
<script>
	
	//引入左侧组件
	Vue.component('leftbar',{
        template: '#leftbar',
        data: function () {
        	return {
        		
        	}
        },
		mounted: function () {
			$('.navi-item').hover(function () {
				$(this).addClass('active');
			},function () {
				$(this).removeClass('active');
			});
			
			$('.bottom-item').hover(function () {
				$(this).addClass('active');
			},function () {
				$(this).removeClass('active');
			});
		},
	});
	
	//引入头部组件
	Vue.component("topbar",{
        template: '#topbar',
        data: function () {
        	return {
        		
        	}
        }
	});
	
//	实名认证
	var realname = Vue.component('realname',{
		template: "#realname",
		data: function () {
			return {
				imageUrl: '',
				imgIdUrl: '',
			}
		},
		 methods: {
	      handleAvatarSuccess(res, file) {
	        this.imageUrl = URL.createObjectURL(file.raw);
	      },
	      handleIdSuccess(res, file) {
	        this.imgIdUrl = URL.createObjectURL(file.raw);
	      },
	      beforeAvatarUpload(file) {
	        var isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
	        var isLt2M = file.size / 1024 / 1024 < 6;
	        console.log(file);
	
	        if (!isJPG) {
	          this.$message.error('上传头像图片只能是 JPG、PNG 格式!');
	        }
	        if (!isLt2M) {
	          this.$message.error('上传头像图片大小不能超过 6MB!');
	        }
	        return isJPG && isLt2M;
	      }
	    }  
	});
	
	//客服设置
	var setkf = Vue.component('setkf',{
		template: "#setkf",
		data: function () {
			return {
				itemes: [
				{no: 1, type: '个人QQ',name: '店小二',number: '546344534',sort: '1'},
				{no: 2, type: '微信群',name: '店小二',number: '546344534',sort: '2'},
				{no: 3, type: '个人QQ',name: '店小二',number: '546344534',sort: '3'},
				{no: 4, type: '微信群',name: '店小二',number: '54634',sort: '4'},
				]
			}
		}
	});
	
	//品牌设置
	var band = Vue.component('band',{
		template: "#band",
		data: function () {
			return {
				input3: '北京全网数商科技股份有限公司',
				input4: '',
				input5: ''
			}
		}
	});
	
	//编辑页面
	var cityOption1 = ['查看订单', '代客户下单', '审核订单', '撤销订单审核通过','修改订单','订单核准(发货后仍可修改订单)','查看出库/发货单','确认审核收货/发货',
						 '确认审核收货','查看订单付款','确认付款到账','添加收款记录','查看退货单','代客户下退货单','审核退货单','退货单收货与退款','订单商品明细',
						 '出库商品明细','退货商品明细','强制完成','修改订单商品价格','订单核价'];
	
	var goodsOption2 = ['查看全部商品','管理与编辑商品','经营范围屏蔽','管理商品分组'];
	
	var saleres = ['首页广告位及商品','公告管理','查看促销','新增与编辑促销','订单红包','红包充值','优惠券','微信'];
	
	new Vue({
		el: "#app",
		router: router,
		data: {
			tipmegs: '',
			showTip: false,
		},
		watch: {
			"$route": function (news, old) {
				if(news.fullPath == '/realname') {
					this.showTip = true;
					this.tipmegs = '实名认证：需上传完整证件，审核通过后才能开启全部功能限制';
				}else if (news.fullPath == '/band') {
					this.showTip = true;
					this.tipmegs = '品牌设置：让你自己的订货平台更符合你们公司的品牌需要';
				}else {
					this.showTip = false;
					this.tipmegs = '';
				}
				
			}
		}
	});
</script>	
</html>
